import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Input, Modal, Select} from 'antd';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import React from 'react';
import { ListItem } from '../data';

const FormItem = Form.Item;

interface ConfigFormProps extends FormComponentProps {
  itemModalVisible: boolean;
  otherValues: any;
  values: Partial<ListItem>;
  onSubmit: (fieldsValue: FormValueType) => Promise<any>;
  onCancel: () => void;
}

export interface FormValueType extends Partial<ListItem> {
  id?: number;
  name?: string;
  remark?: string;
  type?: string;
  nickname?: string;
  rank_num?: number;
  is_enable?:any;
}

const ConfigItemForm: React.FC<ConfigFormProps> = props => {
  const { itemModalVisible, form, onSubmit: handleSubmit, onCancel, otherValues, values } = props;
  const {isUpdate} = otherValues;

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(isUpdate){
        fieldsValue.id = values.id;
      }
      fieldsValue.menu_id = otherValues.parentId;
      handleSubmit(fieldsValue).then(success => {
        if(success){
          form.resetFields();
        }
      });
    });
  };

  return (
    <div>
    { itemModalVisible && 
    <Modal
      destroyOnClose
      title={isUpdate ? "编辑菜单权限" : "新增菜单权限"}
      visible={itemModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限名称">
        {form.getFieldDecorator('name', {
          initialValue: isUpdate ? values.name : '',
          rules: [{ required: true, message: '请输入名称'}],
        })(<Input placeholder="名称" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="权限标识">
        {form.getFieldDecorator('nickname', {
          initialValue: isUpdate ? values.nickname : '',
          rules: [{ required: true, message: '请输入标识'}],
        })(<Input disabled={isUpdate}/>)}
      </FormItem>
  <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="对应权限">
    {form.getFieldDecorator('show_btn_nickname', {
        initialValue: isUpdate ? values.show_btn_nickname : '',
        rules: [{ required: true, message: '请输入名称'}],
      })(<Input disabled={isUpdate}/>)}
    </FormItem>
    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="类型">
        {form.getFieldDecorator('type', {
          initialValue: isUpdate ? values.type : '',
          rules: [{ required: true, message: '请输入'}],
        })(<Input placeholder="1-common,2-column" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
        {form.getFieldDecorator('remark', {
          initialValue: isUpdate ? values.remark : '',
          rules: [{ }],
        })(<Input placeholder="描述" />)}
      </FormItem>
    </Modal>
    }
    </div>
  );
};

export default Form.create<ConfigFormProps>()(ConfigItemForm);
